<template>
    <el-dialog title="新建会话"  :visible.sync="dialogFormVisible" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false">
        <el-form v-if="addflag" :model="form" ref="from">
            <el-form-item prop="name" :rules="{required: true, message: '名称不能为空', trigger: 'blur'}" label="名称" :label-width="formLabelWidth">
                <el-input v-model="form.name" ></el-input>
            </el-form-item>

            <el-form-item prop="host" :rules="{required: true, message: '主机不能为空', trigger: 'blur'}" label="主机" :label-width="formLabelWidth">
                <el-input v-model="form.host" ></el-input>
            </el-form-item>


            <el-form-item prop="port" :rules="{required: true, message: '端口号不能为空', trigger: 'blur'}" label="端口号" :label-width="formLabelWidth">
                <el-input v-model="form.port" type="number" default=22 min=1 max=65535 ></el-input>
            </el-form-item>

            <el-form-item prop="userName" :rules="{required: true, message: '账号不能为空', trigger: 'blur'}" label="账号" :label-width="formLabelWidth">
                <el-input v-model="form.userName" ></el-input>
            </el-form-item>

            <el-form-item prop="password"  :rules="{required: true, message: '密码不能为空', trigger: 'blur'}" label="密码" :label-width="formLabelWidth">
                <el-input v-model="form.password" type="password"></el-input>
            </el-form-item>
            <el-form-item prop="remark" label="备注" :label-width="formLabelWidth">
                <el-input v-model="form.remark"></el-input>
            </el-form-item>
            <el-form-item prop="remember" label="记住我" :label-width="formLabelWidth">
                <el-switch v-model="form.remember"></el-switch>
            </el-form-item>
        </el-form>
        <div v-if="addflag" slot="footer" class="dialog-footer">
            <!-- <el-button @click="dialogFormVisible = false">取 消</el-button> -->
            <el-button type="primary" @click="opensession">确 定</el-button>
        </div>






         <el-table
         v-if="!addflag"
        :data="tableData"
        style="width: 100%"
        @row-click="rowClick"
        @row-dblclick="rowDblclick"
        max-height="250">
            <el-table-column
            fixed
            prop="name"
            label="名称"
            width="150">
            </el-table-column>

            <el-table-column
            prop="host"
            label="主机"
            width="120">
            </el-table-column>

            <el-table-column
            prop="port"
            label="端口号"
            width="120">
            </el-table-column>

            <el-table-column
            prop="userName"
            label="账户"
            width="120">
            </el-table-column>

            <el-table-column
            prop="remark"
            label="备注"
            width="120">
            </el-table-column>

            <el-table-column
            fixed="right"
            label="操作"
            width="120">
            <template slot-scope="scope">
                <el-button
                @click.native.prevent="deleteRow(scope.$index, tableData)"
                type="text"
                size="small">
                移除
                </el-button>
            </template>
        </el-table-column>
    </el-table>




    </el-dialog>
</template>
<script>
  export default {
    name:"DialogInint",
    data() {
      return {
            dialogFormVisible: false,
            addflag: false,
            form: {
                name: '',
                host: '',
                port: 22,
                userName: '',
                password: '',
                remark: '',
                remember: false
            },
            formLabelWidth: '120px',
            tableData:[],
            name: 'userRecord'
      };
    },
    methods:{
        opensession(){
            this.$refs.from.validate(valid => {
                if(valid){
                    console.log('success submit!!');
                    let data = {
                                name: this.form.name,
                                host: this.form.host,
                                port:this.form.port,
                                userName: this.form.userName,
                                password: this.form.password
                            }
                    if(this.form.remember){
                        this.savelocal(this.form);
                    }
                    this.$emit('openSession', data);
                }else{
                    console.log('error submit!!');
                    return false;
                }

            });
        },
        showOn(){
            this.dialogFormVisible = !this.dialogFormVisible;
            if(this.dialogFormVisible){
                let formData = this.getAllLocal();
                if(formData != null){
                    this.addflag = false;
                    this.tableData = formData;
                }else{
                    this.addflag = true;
                }
            }
        },
        savelocal(formData){
            let dataStr = localStorage.getItem(this.name);
            let data = [];
            let flag = true;
            if(dataStr != null && dataStr != '') {
                data = JSON.parse(dataStr);
                for(let value of data){
                    if(value.name == formData.name){
                        flag = false;
                        continue;
                    }
                }
            }
            if(flag){
                 data.push(formData);
                localStorage.setItem(this.name, JSON.stringify(data));
            }
        },
        getAllLocal(){
            let dataStr = localStorage.getItem(this.name);
            if(dataStr != null && dataStr != ''){
                return JSON.parse(dataStr);
            }
            return null;
        },

        deleteRow(index, rows) {
            let dataStr = localStorage.getItem(this.name);
            let ss = JSON.parse(dataStr);
            ss.splice(index, 1);
            rows.splice(index, 1);
            localStorage.setItem(this.name, JSON.stringify(ss));
        },
        rowClick(row){
            setTimeout(()=>{
                if(!this.addflag){
                    this.addflag = true;
                    this.form = row;
                }
            }, 200)
        },
        rowDblclick(row){
            this.$emit('openSession', row);
        }
    }
  };
</script>